<template>
	<view class="help">
		<view class="tab">
			<view v-for="(item, index) in tabItem" :key="index" class="item-wrap">
				<view @click="tabtap(item, index)" class="f-item">
					<text class="title">{{ item.class_name }}</text>
					<text class="iconfont" :class="index == oldindex ? 'iconunfold' : 'iconright'"></text>
				</view>
				<view class="s-tab" v-if="index == oldindex">
					<view v-for="sitem in sTabItem" class="s-item" :key="sitem.id" @click="sTabtap(sitem)">{{ sitem.title }}</view>
				</view>
			</view>
		</view>
		<loading-cover ref="loadingCover"></loading-cover>
	</view>
</template>

<script>
import http from 'common/js/http.js';
import loadingCover from '@/components/loading/loading.vue';
export default {
	components: {
		loadingCover
	},
	data() {
		return {
			tabItem: [],
			sTabItem: [],
			oldindex: -1
		};
	},
	onLoad(event) {
		this.loadClassData();
	},
	mixins: [http],
	methods: {
		loadClassData() {
			this.sendRequest({
				url: 'System.Shop.helpClassList',
				success: res => {
					let list = res.data.data;
					this.tabItem = list;
					if (this.$refs.loadingCover == undefined) return;
					this.$refs.loadingCover.hide();
				}
			});
		},
		tabtap(item, index) {
			this.currentId = item.class_id;
			this.sendRequest({
				url: 'System.Shop.helpInfo',
				data: {
					class_id: this.currentId
				},
				success: res => {
					let list = res.data.data;
					this.sTabItem = list;
					if (index == this.oldindex) {
						this.oldindex = -1;
					} else {
						this.oldindex = index;
					}
				}
			});
		},
		sTabtap(item) {
			if (JSON.stringify(item) == '{}') {
				item.id = 0;
			}
			this.$util.redirectTo('/pages/help/detail/detail', { id: item.id });
		}
	}
};
</script>

<style lang="scss">
.help {
	height: 100%;
	box-sizing: border-box;
	background: $page-color-base;
	padding-top: 20rpx;
}

.tab {
	background: #ffffff;
	.item-wrap {
		.f-item {
			padding: 0 30rpx;
			border-bottom: 2rpx solid $ns-border-color-gray;
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 88rpx;
			font-size: $ns-font-size-lg;
			color: $ns-text-color-black;
			.iconfont {
				font-size: $ns-font-size-lg + 4rpx;
				color: $ns-text-color-gray;
			}
		}

		.s-tab {
			padding-left: 60rpx;
			background: $page-color-base;
			.s-item {
				line-height: 88rpx;
				border-bottom: 2rpx solid $ns-border-color-gray;
			}
			// .s-item:nth-last-child(1){
			// 	border-bottom:none;
			// }
		}
	}
}
</style>
